<template>
	<view>
		<view class="top-box">
			<!-- 审核 -->
			<view class="examine">
				<navigator class="scroll-nav" url="/subpkg/examine/examine">
					<view class="font-img">
						<uni-icons custom-prefix="iconfont" type="icon-shenhe"  color="green" size="35"></uni-icons>
						<view v-if="message.countNotice>0">
							<text class="cal-number">{{message.countNotice}}</text>
						</view>
						
					</view>
					<text class="cal-text"> 审核通知</text>
						
					
				</navigator>
			</view>
			<!-- 评论 -->
			<view class="examine">
				<navigator class="scroll-nav" url="/subpkg/comment/comment">
					<view class="font-img-comment">
							<uni-icons custom-prefix="iconfont" type="icon-pinglun"  color="blue" size="35"></uni-icons>
							<view v-if="message.countUnReadReview>0">
								<text class="cal-number"> {{message.countUnReadReview}}</text>
							</view>
							
							
					</view>
				
					<text class="cal-text-comment"> 评论</text>
				</navigator>
			</view>
			
		</view>
		<view class="">
			<uni-section title=" " type="line">
				<uni-list>
					<uni-list-chat v-for="item in messagelist" :key="item.id" :title="item.toName" :avatar="item.toImage" :note="item.lastMessage"
					 :time="item.time" :clickable="true"  @click="onClickMessage(item)"></uni-list-chat>
				</uni-list>
			</uni-section>
		</view>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	import { mapState, mapMutations } from 'vuex'
	//import WebSocketManager  from '@/utils/websocketNew.js';
	export default {
		mixins: [badgeMix],
		computed: {
		  ...mapState('m_message', ['message']),
		  ...mapState('m_user', ['userinfo']),
		  ...mapState('m_user', ['userId']),
		  ...mapState('m_messagelist', ['messagelist']),
		 
		},
		data() {
			return {
				listData: [],
				UNITS: {
					'年': 31557600000,
					'月': 2629800000,
					'天': 86400000,
					'小时': 3600000,
					'分钟': 60000,
					'秒': 1000
				},
			};
		},
		
		onShow() {
			console.log(this.messagelist)
			
			//得到未读的消息
			this.getMessage()
			
			this.getList()
			this.$store.dispatch('WEBSOCKET_INIT', `wss://campusstyle.site:8982/websocket/${this.userId}`)
		},
		onLoad() {
			//this.webSocketManager = new WebSocketManager(this.userId);  

		},
		methods: {
			...mapMutations('m_message', ['updateMessageInfo']),
			
			getList() {
				
			},
			getRandomArrayElements(arr, count) {
				var shuffled = arr.slice(0),
					i = arr.length,
					min = i - count,
					temp, index;
				while (i-- > min) {
					index = Math.floor((i + 1) * Math.random());
					temp = shuffled[index];
					shuffled[index] = shuffled[i];
					shuffled[i] = temp;
				}
				return shuffled.slice(min);
			},
			setTime(items) {
				var newItems = [];
				items.forEach(e => {
					newItems.push({
						author_name: e.author_name,
						cover: e.cover,
						id: e.id,
						post_id: e.post_id,
						published_at: this.format(e.published_at),
						title: e.title
					});
				});
				return newItems;
			},
			format(dateStr) {
				var date = this.parse(dateStr)
				var diff = Date.now() - date.getTime();
				if (diff < this.UNITS['天']) {
					return this.humanize(diff);
				}
				var _format = function(number) {
					return (number < 10 ? ('0' + number) : number);
				};
				return date.getFullYear() + '-' + _format(date.getMonth() + 1) + '-' + _format(date.getDate()) + ' ' +
					_format(date.getHours()) + ':' + _format(date.getMinutes());
			},
			parse(str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
				var a = str.split(/[^0-9]/);
				return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
			},
		  //获取未读消息数量
		  async getMessage(){
		  	await uni.request({
		  	    url: uni.$http.baseUrl+'/api/mobileNotice/countNoReadNotice',
		  	    data: {
		  	       // 当前登录人
		  	       userId: this.userId,
		  	    },
		  		method: 'POST',
		  	    header: {
		  	          // "Content-Type": "application/json",
		  	          "Content-Type": "application/x-www-form-urlencoded"
		  	        },
		  	    success: (res) => {
					console.log(res.data.data)
					//将选择的学校放入内存中
					this.updateMessageInfo(res.data.data)
					if(res.data.data.count!=0){
						 uni.setTabBarBadge({ 
							index: 1,// 索引下标
							text: res.data.data.count+""//动态数字
						})
					}
		  	    },
		  		fail: (res) =>{
		  			if (res.statusCode !== 200) return uni.$showMsg()
		  		}
		  	});
		  },
		  onClickMessage(item){
			  uni.navigateTo({
			    url: '/subpkg/cantact/cantact?sellerId='+item.toId
			  })
		  },
		}
	}
</script>

<style lang="scss">
@import "@/static/iconfont.css";
.top-box{
	background-color: white;
	height: 80px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center; /* 垂直居中 */
	.examine {
		
		
	  margin: 0 50px; /* 两个盒子之间的间隔 */
	  .font-img,.font-img-comment{
		  position: relative;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  width: 50px;
		  height: 45px;
		  border-radius: 5px;
		  .cal-number{
		  	 position: absolute;
		  	 top: 0;
		  	 right: 0;
		  	  /* 角标样式 */
		  	  padding: 2px 5px;
		  	  background-color: red;
		  	  color: white;
		  	  border-radius: 10px;
		  	  font-size: smaller;
		  }
	  }
	  .font-img{
		   background-color: #e6fff6;
	  }
	  .font-img-comment{
		   background-color: #d7ebff;
	  }
	 
	  .cal-text-comment{
	  	padding-left: 10px;
	  }
	  
	}
}

</style>
